<template>
  <div class="box">
    <h2>小黑记事本</h2>
    <!-- 输入非空的内容，点击+按钮后，如果内容不为空，则将新的记录添加到列表中，同时清空当前输入的内容 -->
    <input type="text" placeholder="请输入非空内容，点击加号记录" v-model="todo" @keyup.enter="addTodo"/>
    <button @click="addTodo" >+</button>
    <!-- 显示用户待办事项的列表，双击当前列表项或者点击X按钮后，删除当前记录 -->
    <ul class='items'>
      <li class="item" v-for="(item,index) in todoList" :key="'list'+ index" @dblclick="removeTodo(index)"> {{ index+1 }} · {{ item }}
      <button class="sub" @click="removeTodo(index)">X</button></li>
    </ul>
    <p>双击栏目删除对应数据</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 待办输入
const todo = ref("")
// 待办列表
const todoList = ref(['吃饭','睡觉','敲代码'])

// 添加待办方法
const addTodo = () => {
  if(todo.value === ''){
    alert("输入不允许为空")
    return
  }
  todoList.value.push(todo.value)
  todo.value = ''
}

// 移除待办方法
const removeTodo = (index) => {
  todoList.value.splice(index,1)
}


</script>

<style lang="scss" scoped>
    .box{
      text-align: center;
    }
    
    h2 {
      text-align: center;
      margin-top: 100px;
    }

    body {
      text-align: center;
    }

    input {
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 16px;
      padding-left: 10px;
      outline: none;
      border: 1px solid #000;
    }

    button {
      width: 32px;
      height: 32px;
      border-radius: 5px;
      box-shadow: none;
      border: none;
      font-size: 21px;
      cursor: pointer;
    }

    p {
      color: #aaa;
    }

    .items {
      list-style: none;
      padding: 0;
      width: 350px;
      margin: 20px auto;
    }

    .items .item {
      font-size: 16px;
      line-height: 32px;
      text-align: left;
      cursor: pointer;
      border-bottom: 1px solid #eee;
    }

    button.sub {
      width: 25px;
      height: 25px;
      font-size: 12px;
      float: right;
      margin-top: 5px;
    }

    button.sub:hover {
      color: red;
    }
</style>
